<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>确认订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="../default/css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../default/css/index.css" />
    <link rel="stylesheet" type="text/css" href="../default/css/animat.min.css" />
    <style>
        body{
            background: #f2f2f2;
        }
        .mui-content{
            background: #f2f2f2;
        }
        .mui-bar-nav~.mui-content{
            padding-bottom: 50px;
        }
        .cash-withdrawal-btn{
            width: auto;
            min-width: 100px;
            vertical-align: inherit;
        }

        /*弹出菜单样式*/
        .modtai-control-box{
            top: 20%;
        }

        .jianbiancolor{
            background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
        }
        .day-task-box{
            padding: 0;
            border-radius: 10px;
            overflow: hidden;
            text-align: center;
        }
        .day-task-title{
            padding: 10px 15px;
        }
        .modtai {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 10;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            display: none;
        }
        .modtai-control-box{
            position: fixed;
            top: 20%;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 11;
            padding: 10px 15px;
            display: none;
            width: 90%;
            margin:0 auto;

        }
        .day-task-progressbar-box{
            margin: 10px auto;
        }
        .day-task-progressbar-box .mui-progressbar{
            height: 10px;
            border-radius: 20px;
            background: #f5f5f5;
        }
        .day-task-progressbar-box .mui-progressbar span{
            background-color: #ffdb28;
        }
        .day-task-centan{
            border-radius: 5px;
            border: 1px solid #f5f5f5;
            -moz-box-shadow:0px 1px 15px #f5f5f5; -webkit-box-shadow:0px 1px 15px #f5f5f5; box-shadow:0px 1px 15px #f5f5f5;
            padding: 10px 15px;

        }
        .ewm-box{
            background: #fff;
            padding: 10px 15px;
        }
        .ewm-box button{
            margin: 10px auto;
        }
        .address-name-box,.commodityPrice,#commodityReadingTreasure{
            display: none;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">确认订单</h1>
</header>

<div class="mui-content">
    <div class="mui-card address-box">
        <div class="mui-col-xs-2 mui-col-sm-2 mui-inline">
            <div class="address-icon" style="height: auto">
                <span class="mui-icon mui-icon-location"></span>
            </div>
        </div>
        <div class="mui-col-xs-9 mui-col-sm-9 mui-inline ">
            <p class="address-name-box"><b id="consigneeName">名字</b><span id="consigneeTelephone">123456789</span></p>
            <h5 id="detailedAddress">请选择收货地址</h5>
            <i class="mui-icon mui-icon-arrowright address-list-box"></i>
        </div>
    </div>
    <div class="mui-card order-deta-box">
        <!--<h5>枢纽科技旗舰店</h5>-->
        <div class="order-deta-tiy">
            <div class="mui-col-xs-4 mui-col-sm-4 mui-inline">
                <img id="encryptedName" src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/news_test_1.jpg" alt="">
            </div>
            <div class="mui-col-xs-4 mui-col-sm-4 mui-inline">
                <div class="mui-ellipsis-2" id="tradeName">----</div>
                <p id="specification_name"></p>
            </div>
            <div class="mui-col-xs-3 mui-col-sm-3 mui-inline mui-text-right">
                <p class="commodityPrice">----</b></p>
                <p id="commodityReadingTreasure">----阅读宝 </p>
                <p>x <b class="shopnubmer">1</b></p>
            </div>
        </div>
        <form class="mui-input-group">
           <!-- <div class="mui-input-row ">
                <label>规格</label>
                <input type="text" class="" id="specification_name" readonly>
            </div>-->
            <div class="mui-input-row ">
                <label>数量</label>
                <input type="text" class="" id="buy-shop-input" placeholder="1" value="1" readonly>
            </div>


           <!-- <div class="mui-input-row">
                <label>配送方式</label>
                <input type="text" class="mui-input-clear" placeholder="普通配送" readonly>
            </div>-->
            <div class="mui-input-row">
                <label>订单备注</label>
                <input type="text" class="mui-input-clear" placeholder="选填" id="remarks">
            </div>
            <div class="subtotal-box pading10-15">
                共 <em class="shopnubmer">1</em>件 <span style="color: #000">小计: </span><span style="color: red"><b class="subm-oredr-Price">----</b></span>
            </div>
        </form>
    </div>
    <!--<div class="mui-card pading10-15 border-radius15">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">运费<span class="mui-badge mui-badge-primary">￥14</span></li>
        </ul>
    </div>-->
    <nav class="foot-btn-box mui-text-right">
        <span style="color: #ccc">共 <span class="shopnubmer">1</span>件,</span>
        <span style="color: #000">合计:</span>
        <span style="color: red"><span class="subm-oredr-Price" >----</span></span>
        <button type="button" class="mui-btn mui-btn-danger cash-withdrawal-btn subm-this-order">提交</button>
    </nav>


</div>




<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>
<!--<script src="../default/js/vconsole.js" type="text/javascript" charset="utf-8"></script>-->

<script>
    mui.init();
    mui.showLoading("正在加载..","div");
    // ajax地址

    // 用户是否是vip
    var uservip = '';
    // 商品ID
    var commodityId = localStorage.getItem('commodityId');

    // 商品是否是会员产品
    var designatedProduct = localStorage.getItem('designatedProduct');
    // 规格ids
    var specificationsId = localStorage.getItem('specificationsId');
    // 规格名称
    var specification_name = localStorage.getItem('specification_name');
    // 规格价格
    var commodity_price = localStorage.getItem('commodity_price');
    // 地址id
    var addressId = localStorage.getItem("addressId");
    // 商品的阅读宝
    var newscommodityReadingTreasure=localStorage.getItem('newscommodityReadingTreasure');

    //购买金额
    var purchaseAmount = localStorage.getItem('purchaseAmount');

    if(specification_name!=null){
        $("#specification_name").html('商品规格:'+specification_name);
    }
    if(addressId!=null){
        finduseraddress();
    }
    if(designatedProduct=='是'){
        $(".address-box").hide();
    }

    // 显示
    mui(".foot-btn-box").on('tap', '.subm-this-order', function () {
        // 收获id

        //是否是会员产品

        if(uservip=='是' && designatedProduct=='是'){
            mui.alert('VIP用户不可继续购买VIP产品', '提示', function () {
                mui.showLoading("正在加载..", "div");
                localStorage.removeItem("shopnumber");
                setTimeout(function () {
                    mui.hideLoading();
                    mui.openWindow({
                        url: 'shop.html',
                    });
                }, 500);
            });
            return;
        }

        if(designatedProduct!='是'){
            if(addressId!= null){
                ordersubmission();
            }else {
                mui.alert('请先选择收货地址');
            }
        }else {
            ordersubmission();
        }


    });


    mui(".mui-content").on('tap', '.address-box', function () {
        mui.openWindow({
            url: 'address-list.html'
        });

    });

    $(function () {
        findshopById();
        areMembers();
    });

    // 查询商品详细信息
    function findshopById() {
        if(commodityId==null){
            mui.alert('发生未知错误，请返回页面继续操作', '错误', function() {
                mui.openWindow({
                    url: 'shop.html',
                });
            });
        }else {
            $.ajax({
                url:website+'/CommodityController/findById',
                type:'post',
                dataType: "json",
                data:{
                    id: commodityId
                },
                success:function (data) {


                    if(purchaseAmount!=0 || purchaseAmount!=''){
                        $(".commodityPrice").html('￥'+purchaseAmount);
                        $(".commodityPrice").show();
                    }else{
                        $(".commodityPrice").hide();
                    }
                    if(newscommodityReadingTreasure!=0 || newscommodityReadingTreasure!=''){
                        $("#commodityReadingTreasure").html(newscommodityReadingTreasure+'阅读宝');
                        $("#commodityReadingTreasure").show();
                    }else{
                        $("#commodityReadingTreasure").hide();
                    }

                    if(newscommodityReadingTreasure==0 || newscommodityReadingTreasure=='' || newscommodityReadingTreasure==null){
                        $(".subm-oredr-Price").html('￥'+purchaseAmount);
                    }else if(purchaseAmount=='' ||purchaseAmount==0 || purchaseAmount==null){
                        $(".subm-oredr-Price").html(newscommodityReadingTreasure+'阅读宝');
                    }else{
                        $(".subm-oredr-Price").html('￥'+purchaseAmount+'+'+newscommodityReadingTreasure+'阅读宝');
                    }


                    $("#encryptedName").attr('src', data.data.commodity.encryptedName);
                    $("#tradeName").html(data.data.commodity.tradeName);
                    mui.hideLoading();
                },error:function () {
                    mui.showLoading("发生错误,返回首页..","div");
                    setTimeout(function () {
                        window.location.href = 'http://newst.whilte.com/index.html';
                    },1000)
                }
            });
        }

    }

    // 判断用户是否为会员
    function areMembers() {
        $.ajax({
            url:website+'/UserController/areMembers',
            type:'post',
            data:{
                userId : userId
            },
            success:function (data) {
                console.log(data);
                uservip=data.data
            }
        });
    }

    // 查询用户选择的收货地址
    function finduseraddress(){
        if(addressId==null){

        }else {
            $.ajax({
                url:website+'/ReceivingAddressController/findById',
                type:'post',
                dataType: "json",
                data:{
                    id: addressId
                },
                success:function (data) {
                    console.log(data);
                    $(".address-icon").css('height','80px');
                    $(".address-name-box").show();
                    $("#detailedAddress").html(data.data.addressName+data.data.detailedAddress);
                    $("#consigneeName").html(data.data.consigneeName);
                    $("#consigneeTelephone").html(data.data.consigneeTelephone);
                }
            });
        }

    }

    //提交订单
    function ordersubmission() {

        // 备注
        var remarks = $("#remarks").val();
        // 地址id
        if(designatedProduct!='是'){
            addressId = localStorage.getItem("addressId");
        }else{
            addressId = 6;
        }

        $.ajax({
            url:website+'/OrderController/placeOrder',
            type:'post',
            dataType: "json",
            data:{
                userId:userId,
                commodityId:commodityId,
                addressId:addressId,
                purchaseAmount:purchaseAmount,
                remarks:remarks,
                specificationName:specification_name,
                commodityReadingTreasure:newscommodityReadingTreasure
            },
            success:function (data) {
                console.log(data);

                mui.showLoading("正在加载..", "div");

                // localStorage.removeItem("addressId");
                localStorage.removeItem("commodityId");
                localStorage.removeItem("addressId");

                localStorage.setItem('orderId',data.data.id);
                if(data.data.purchaseAmount=='' || data.data.purchaseAmount==null){
                    localStorage.setItem('totalPrice',0);
                }else{
                    localStorage.setItem('totalPrice',data.data.purchaseAmount);
                }

                if(newscommodityReadingTreasure=='' || newscommodityReadingTreasure==null){
                    localStorage.setItem('commodityReadingTreasure',0);
                }else{
                    localStorage.setItem('commodityReadingTreasure',newscommodityReadingTreasure);
                }


                localStorage.setItem('orderNumber',data.data.orderNumber);
                localStorage.setItem('orderStatus',data.data.orderStatus);
                localStorage.setItem('tradeName',data.data.commodity.tradeName);
                // localStorage.setItem('specificationsId',specificationsId);


                //window.location.href='payment.html';
                 window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxed752d87990909bb&redirect_uri=http://newst.whilte.com/templets/html/payment.html&response_type=code&scope=snsapi_base#wechat_redirect';

            }
        });
    }



</script>
</body>
</html>